Marko: Deklaratyvusis UI su transliuojamuoju serverio pusės atvaizdavimu

Šiandieniniame greitame skaitmeniniame pasaulyje svetainės našumas yra itin svarbus. Lėtai įkraunama arba nereaguojanti svetainė gali sukelti vartotojų nusivylimą, didesnį atmetimo rodiklį ir galiausiai prarastas pajamas. Marko, deklaratyvusis UI sistema, sprendžia šias problemas, siūlydama unikalų požiūrį į didelio našumo interneto programų kūrimą. Šiame straipsnyje bus nagrinėjamos pagrindinės Marko funkcijos, ypač jo transliuojamojo serverio pusės atvaizdavimo (SSR) galimybės, ir paaiškinama, kodėl tai yra patrauklus pasirinkimas kūrėjams, kuriantys svetaines ir interneto programas pasaulinei auditorijai.

Kas yra Marko?

Marko yra atvirojo kodo UI sistema, kurią sukūrė „eBay“ ir dabar palaiko „Marko“ komanda. Ji išsiskiria iš kitų sistemų dėmesiu našumui, paprastumui ir masteliui. Skirtingai nei kai kurios sistemos, kurios teikia pirmenybę kliento pusės atvaizdavimui, Marko pabrėžia serverio pusės atvaizdavimą, ypač transliuojamąjį SSR. Tai reiškia, kad serveris iš anksto atvaizduoja jūsų programos HTML ir siunčia jį į naršyklę dalimis (srautais), kai tik jis tampa prieinamas, todėl greičiau atvaizduojamas pirmasis turinys (FCP) ir pagerėja vartotojo patirtis.

Pagrindinės Marko funkcijos ir privalumai

• Deklaratyvi sintaksė: Marko naudoja deklaratyviąją sintaksę, panašią į HTML, todėl ją lengva išmokti ir naudoti. Šis paprastumas sumažina kūrėjų mokymosi kreivę ir leidžia jiems sutelkti dėmesį į funkcijų kūrimą, o ne kovoti su sudėtingomis sistemos koncepcijomis.
• Transliuojamasis serverio pusės atvaizdavimas (SSR): Tai, ko gero, galingiausia Marko funkcija. Transliuojamasis SSR leidžia serveriui siųsti HTML į naršyklę palaipsniui, kai tik jis paruoštas, užuot laukus, kol bus atvaizduotas visas puslapis. Tai žymiai pagerina suvokiamą svetainės našumą, ypač vartotojams, turintiems lėtesnį interneto ryšį arba tiems, kurie lankosi svetainėje iš geografiškai nutolusių vietų. Įsivaizduokite vartotoją kaimo Indijoje, besilankantį svetainėje, sukurtoje naudojant Marko transliuojamąjį SSR. Jis pradėtų matyti turinį daug greičiau, palyginti su svetaine, kuri remiasi tik kliento pusės atvaizdavimu, kuriam reikia atsisiųsti visą JavaScript, prieš ką nors rodant.
• Automatinis kodo skaidymas: Marko automatiškai suskaido jūsų JavaScript kodą į mažesnius gabalus ir įkelia juos pagal poreikį, sumažindamas pradinį atsisiuntimo dydį ir pagerindamas puslapio įkėlimo laiką. Tai itin svarbu mobiliesiems vartotojams ir tiems, kurie turi ribotą pralaidumą.
• Komponentų pagrindu sukurta architektūra: Marko skatina komponentų pagrindu sukurtą architektūrą, leidžiančią suskaidyti programą į pakartotinai naudojamus, valdomus elementus. Tai pagerina kodo organizavimą, priežiūrą ir testavimą.
• HTML panaši sintaksė su plėtiniais: Marko sintaksė išplečia HTML su tokiomis funkcijomis kaip komponentai, kilpos ir sąlyginis atvaizdavimas, todėl ji yra intuityvi kūrėjams, susipažinusiems su HTML. Pavyzdžiui, galite lengvai sukurti pakartotinai naudojamą mygtuko komponentą ir naudoti jį visoje programoje.
• Optimizuota SEO: Serverio pusės atvaizdavimas leidžia jūsų svetainei lengviau pasiekti paieškos sistemų robotus, pagerindamas jūsų paieškos sistemos reitingą. Tai yra didelis privalumas įmonėms, norinčioms pritraukti organinį srautą į savo svetaines.
• Mažas paketo dydis: Marko turi palyginti nedidelį vykdymo laiko dydį, palyginti su kitomis populiariomis sistemomis, o tai dar labiau prisideda prie greitesnio įkėlimo laiko.
• Progresyvus tobulinimas: Marko skatina progresyvų tobulinimą, leidžiantį jūsų svetainei veikti net ir tada, kai „JavaScript“ išjungtas arba nepavyksta jo įkelti. Tai užtikrina geresnę vartotojo patirtį visiems lankytojams, nepriklausomai nuo jų naršyklės galimybių.
• Įmontuotos optimizacijos: Marko apima įvairias įmontuotas optimizacijas, tokias kaip šablonų talpyklavimas ir DOM diferencijavimas, kurios dar labiau padidina našumą.
• Lengva integracija: Marko galima lengvai integruoti su esamais „Node.js“ galiniais komponentais ir kitais priekiniais įrankiais.

Gilinimasis į transliuojamąjį serverio pusės atvaizdavimą

Išsamiau panagrinėkime transliuojamojo SSR privalumus:

Pagerintas pirmasis turinio atvaizdavimas (FCP)

FCP yra pagrindinis rodiklis, matuojant svetainės našumą. Jis parodo laiką, per kurį ekrane pasirodo pirmasis turinys (tekstas, vaizdas ir pan.). Transliuojamasis SSR žymiai sumažina FCP, nes naršyklė pradeda gauti ir atvaizduoti HTML daug anksčiau nei atliekant kliento pusės atvaizdavimą. Užuot laukęs, kol bus atsisiųstas ir įvykdytas visas JavaScript paketas, naršyklė gali iš karto pradėti rodyti pradinį puslapio turinį. Įsivaizduokite el. prekybos svetainę, kurioje rodomi produktų sąrašai. Su transliuojamuoju SSR vartotojas beveik iš karto pamato produktų vaizdus ir aprašymus, netgi prieš tai, kai interaktyvūs elementai yra visiškai įkelti. Tai sukuria daug įdomesnę ir reaguojamesnę vartotojo patirtį.

Geresnė vartotojo patirtis

Greitesnis FCP reiškia geresnę vartotojo patirtį. Mažiau tikėtina, kad vartotojai atsisakys svetainės, jei turinį pamatys greitai. Transliuojamasis SSR užtikrina sklandesnę ir reaguojamesnę patirtį, ypač lėtesniuose tinkluose ar įrenginiuose. Tai ypač svarbu mobiliųjų įrenginių vartotojams besivystančiose šalyse, kur interneto ryšys gali būti nepatikimas. Pavyzdžiui, naujienų svetainė, naudojanti transliuojamąjį SSR, gali akimirksniu pateikti svarbiausias naujienas ir santraukas net ir vartotojams, turintiems ribotą pralaidumą.

SEO privalumai

Paieškos sistemų robotai remiasi HTML turiniu, kad suprastų svetainės struktūrą ir turinį. Serverio pusės atvaizdavimas užtikrina paruoštą HTML, todėl paieškos sistemoms lengviau nuskaityti ir indeksuoti jūsų svetainę. Tai pagerina jūsų paieškos sistemos reitingą ir padidina organinį srautą. Nors „Google“ tapo geresnis atvaizduojant „JavaScript“, SSR vis dar suteikia didelį pranašumą, ypač svetainėms su sudėtingomis „JavaScript“ intensyviomis programomis. Kelionių agentūros svetainė, naudojanti SSR, turės savo paskirties puslapius tinkamai indeksuotus, užtikrindama, kad jie pasirodytų atitinkamuose paieškos rezultatuose.

Patobulintas prieinamumas

SSR prisideda prie geresnio prieinamumo, pateikdamas HTML turinį, kurį lengvai gali išanalizuoti ekrano skaitytuvai ir kitos pagalbinės technologijos. Tai užtikrina, kad jūsų svetainę galės naudoti žmonės su negalia. Atvaizduodami pradinį turinį serveryje, jūs suteikiate tvirtą pagrindą prieinamumui, netgi prieš tai, kai „JavaScript“ yra visiškai įkeltas. Pavyzdžiui, vyriausybės svetainė, naudojanti SSR, užtikrins, kad visi piliečiai, nepriklausomai nuo jų gebėjimų, galėtų pasiekti svarbią informaciją.

Marko vs. kitos sistemos

Kaip Marko susitvarko su kitomis populiariomis UI sistemomis, tokiomis kaip React, Vue ir Angular?

Marko vs. React

React yra plačiai naudojama biblioteka, skirta vartotojo sąsajoms kurti. Nors „React“ gali būti naudojamas su serverio pusės atvaizdavimu (naudojant „Next.js“ arba panašias sistemas), pagal numatytuosius nustatymus jis paprastai remiasi kliento pusės atvaizdavimu. Marko transliuojamasis SSR suteikia našumo pranašumą, palyginti su tradiciniu React SSR metodu. React ekosistema yra didžiulė, joje yra daug bibliotekų ir įrankių, tačiau tai taip pat gali sukelti sudėtingumą. Marko sutelkia dėmesį į paprastumą ir našumą, siūlydamas supaprastintą kūrimo patirtį. Apsvarstykite sudėtingą informacijos suvestinės programą. Nors „React“ siūlo komponentų pagrindu sukurtą metodą, Marko transliuojamasis SSR gali suteikti našumo padidėjimą pradiniame puslapio įkėlime, ypač rodant didelius duomenų rinkinius.

Marko vs. Vue

Vue yra dar viena populiari sistema, žinoma dėl savo paprastumo ir progresyvaus požiūrio. Vue taip pat palaiko serverio pusės atvaizdavimą (naudojant „Nuxt.js“). Marko ir Vue turi tam tikrų panašumų paprastumo ir komponentų pagrindu sukurtos architektūros srityse. Tačiau Marko transliuojamasis SSR suteikia aiškų našumo pranašumą, ypač svetainėms su dideliu srautu arba sudėtingais UI. Vue dažnai reikalauja daugiau rankinio optimizavimo serverio pusės atvaizdavimui, kad būtų pasiektas optimalus našumas. Pavyzdžiui, socialinės žiniasklaidos svetainė gali pasinaudoti Marko transliuojamuoju SSR, kad greitai rodytų vartotojų srautus ir atnaujinimus.

Marko vs. Angular

Angular yra pilnateisė sistema, kuri suteikia išsamų sprendimą kuriant sudėtingas interneto programas. Angular palaiko serverio pusės atvaizdavimą per „Angular Universal“. Tačiau „Angular“ gali būti sudėtingiau išmokti ir naudoti, palyginti su Marko ir Vue. Marko paprastumas ir dėmesys našumui daro jį patraukliu pasirinkimu projektams, kuriuose našumas yra pagrindinis prioritetas. Didelė įmonės programa gali pasirinkti „Angular“ dėl jo patikimų funkcijų ir mastelio, tačiau mažesnis paleidimo etapas gali pasirinkti Marko greitį ir lengvą kūrimą.

Apibendrinant: Nors „React“, „Vue“ ir „Angular“ palaiko serverio pusės atvaizdavimą, Marko įmontuotas transliuojamasis SSR suteikia didelį našumo pranašumą. Marko teikia pirmenybę našumui ir paprastumui, todėl tai puikus pasirinkimas projektams, kuriuose šie veiksniai yra kritiniai.

Pradžia su Marko

Pradėti dirbti su Marko yra gana paprasta. Štai pagrindinis aprašas:

1. Įdiekite Node.js: Įsitikinkite, kad jūsų sistemoje įdiegta Node.js.
2. Įdiekite Marko CLI: Paleiskite `npm install -g marko-cli`, kad visame pasaulyje įdiegtumėte Marko komandų eilutės sąsają.
3. Sukurkite naują Marko projektą: Norėdami sukurti naują Marko projektą, naudokite komandą `marko create my-project`.
4. Ištirkite projekto struktūrą: Projekte bus tokie failai kaip `index.marko` (jūsų pagrindinis komponentas), `server.js` (jūsų serverio pusės įėjimo taškas) ir `marko.json` (jūsų projekto konfigūracija).
5. Paleiskite kūrimo serverį: Norėdami paleisti kūrimo serverį, naudokite komandą `npm start`.
6. Pradėkite kurti savo komponentus: Kurkite naujus `.marko` failus savo komponentams ir importuokite juos į savo pagrindinį komponentą.

Marko komponento pavyzdys (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

            

              
                Copy
              
            
          

Serverio pusės atvaizdavimo pavyzdys (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

            

              
                Copy
              
            
          

Tai tik pagrindiniai pavyzdžiai, kad pradėtumėte. Marko siūlo daugybę funkcijų ir parinkčių sudėtingoms interneto programoms kurti. Daugiau informacijos ieškokite oficialioje Marko dokumentacijoje.

Realaus pasaulio Marko pavyzdžiai

Nors „eBay“ iš pradžių sukūrė Marko, dabar jį naudoja įvairios skirtingų pramonės šakų įmonės:

• eBay: eBay plačiai naudoja Marko savo pagrindinėje platformoje, demonstruodama jo gebėjimą valdyti didelius srautus ir sudėtingus UI.
• Lazada (Pietryčių Azija): Pagrindinė el. prekybos platforma Pietryčių Azijoje (priklauso „Alibaba“) naudoja Marko, kad pagerintų našumą ir suteiktų geresnę apsipirkimo patirtį savo vartotojams įvairiose šalyse, turinčiose skirtingą interneto greitį.
• Daugybė paleidimų ir įmonių: Daugelis kitų įmonių naudoja Marko dėl jo našumo pranašumų ir paprastumo.

Šie pavyzdžiai parodo Marko universalumą ir tinkamumą įvairioms interneto programoms.

Geriausia praktika naudojant Marko

Norėdami gauti maksimalią naudą iš Marko, apsvarstykite šias geriausias praktikas:

• Pasinaudokite transliuojamuoju SSR: Visapusiškai išnaudokite Marko transliuojamojo SSR galimybes, kad pagerintumėte FCP ir vartotojo patirtį.
• Optimizuokite savo komponentus: Optimizuokite savo Marko komponentus dėl našumo, sumažindami DOM atnaujinimus ir vengdami nereikalingų atvaizdavimų.
• Naudokite kodo skaidymą: Naudokite Marko automatinio kodo skaidymo funkciją, kad sumažintumėte pradinį JavaScript kodo atsisiuntimo dydį.
• Atsižvelkite į prieinamumą: Užtikrinkite savo svetainės prieinamumą, laikydamiesi prieinamumo gairių ir naudodami semantinį HTML.
• Išsamiai išbandykite savo programą: Išbandykite savo programą skirtinguose įrenginiuose ir naršyklėse, kad užtikrintumėte nuoseklią ir patikimą vartotojo patirtį.

Išvada: Marko – galingas pasirinkimas šiuolaikiniam interneto kūrimui

Marko yra galinga ir universali UI sistema, kuri siūlo patrauklų sprendimą kuriant didelio našumo interneto programas. Jo deklaratyvi sintaksė, transliuojamojo SSR galimybės ir dėmesys paprastumui daro ją puikiu pasirinkimu kūrėjams, norintiems pagerinti svetainės našumą, pagerinti vartotojo patirtį ir padidinti SEO. Priėmę Marko, kūrėjai gali sukurti greitas, reaguojančias ir prieinamas vartotojams visame pasaulyje svetaines ir interneto programas. Nesvarbu, ar kuriate nedidelę asmeninę svetainę, ar didelę įmonės programą, Marko verta apsvarstyti kaip jūsų pasirinktą UI sistemą. Dėmesys turinio greitam ir efektyviam pateikimui daro jį ypač aktualų šiandieniniame globalizuotame ir našumu paremtame skaitmeniniame kraštovaizdyje.

Papildomi ištekliai:

• Oficiali Marko svetainė
• Marko GitHub saugykla
• Marko dokumentacija